<template>
  <el-container v-loading="loading">
    <el-header style="padding: 0;">
      <Navigation :printList="printList" @print="print" @menuShow="menuShow" />
    </el-header>
    <el-container style="padding-left:210px">
      <el-aside
        width="210px"
        style="background-color:#282A36;position:fixed;left:0;height:100%;top:0;overflow-y: hidden;"
      >
        <el-scrollbar class="menu_left">
          <div class="tit">
            <img class="log" src="../assets/img/logo.png" />
            <p class="first">经纪人</p>
            <p>渠道录件系统</p>
          </div>
          <el-menu
            router
            :default-active="defaultActive"
            :collapse="false"
            @open="handleOpen"
            @close="handleClose"
            @select="selectOpen"
          >
            <!-- 一级菜单 -->
            <template v-for="item in list">
              <el-submenu
                v-if="item.children && item.children.length"
                :index="String(item.id)"
                :key="item.id"
              >
                <template slot="title">
                  <!-- <img
                    :index="item.id"
                    :src="imgList[index]"
                    v-show="imgId != item.id"
                    alt
                    style="margin-right:5px"
                  /> -->
                  <!-- <img
                    :index="item.id"
                    :src="imgList1[index]"
                    v-show="imgId == item.id"
                    alt
                    style="margin-right:5px"
                  /> -->
                  <i class="el-icon-menu"></i>
                  <span>{{ item.label }}</span>
                </template>
                <!-- 二级菜单 -->
                <template v-for="itemChild in item.children">
                  <el-submenu
                    v-if="itemChild.children && itemChild.children.length"
                    :index="String(itemChild.id)"
                    :key="itemChild.id"
                  >
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>{{ itemChild.label }}</span>
                    </template>
                    <!-- 三级菜单 -->
                    <el-menu-item
                      v-for="itemChild_Child in itemChild.children"
                      :index="String(itemChild_Child.url)"
                      :key="itemChild_Child.id"
                    >
                      <span slot="title">{{ itemChild_Child.label }}</span>
                    </el-menu-item>
                  </el-submenu>

                  <el-menu-item
                    v-else
                    :index="String(itemChild.url)"
                    :key="itemChild.id"
                  >
                    <i :class="itemChild.icon"></i>
                    <span slot="title">
                      {{ itemChild.label }}
                    </span>
                  </el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item v-else :index="String(item.id)" :key="item.id">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.label }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <keep-alive>
          <router-view @getMessage="showMsg" v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件，比如 Home！ -->
          </router-view>
        </keep-alive>
        <router-view
          @getMessage="showMsg"
          v-if="!$route.meta.keepAlive"
        ></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapMutations } from "vuex";
import { menuList } from "../../src/assets/js/api";
import Navigation from "../components/head";
import icon1 from "@/assets/img/icon-yw.png";
import icon2 from "@/assets/img/icon-yh.png";
import icon3 from "@/assets/img/icon-tc.png";
import icon4 from "@/assets/img/icon-xt.png";
import icon5 from "@/assets/img/icon-nr.png";
import icon6 from "@/assets/img/icon-yyw.png";
import icon7 from "@/assets/img/icon-yyh.png";
import icon8 from "@/assets/img/icon-ytc.png";
import icon9 from "@/assets/img/icon-yxt.png";
import icon10 from "@/assets/img/icon-ynr.png";
import $ from "jquery";
export default {
  components: { Navigation },
  data() {
    return {
      loading: false,
      imgId: "",
      list: [],
      listArr: [],
      printList: [],
      printlabel: {},
      add: false,
      imgList: [icon1, icon2, icon3, icon4, icon5, icon1],
      imgList1: [icon6, icon7, icon8, icon9, icon10, icon6],
      indexUrl: "",
      defaultActive: "" //关键index
    };
  },
  created() {
    this.menuList();
    this.setCurrentRoute();
    this.imgShow(this.$route.path);
  },
  watch: {
    $route() {
      let thisObj = this;
      this.$nextTick(() => {
        thisObj.setCurrentRoute();
      });
    }
  },
  methods: {
    ...mapMutations(["valueQuery"]),
    showMsg(val) {
      if (val == "true") {
        this.loading = true;
      } else if (val == "false") this.loading = false;
    },
    setCurrentRoute() {
      let thisObj = this;
      thisObj.defaultActive = sessionStorage.getItem("url");
      //关键   通过他就可以监听到当前路由状态并激活当前菜单
    },
    //将树形数据转为一维数组
    getList(treeData, list) {
      treeData.map(item => {
        let { id, url, label, otherId, pid } = item;
        list.push({ id, url, label, otherId, pid });
        if (item.children != null) {
          this.getList(item.children, list);
        }
      });
    },
    selectOpen(index, pathIndex) {
      sessionStorage.setItem("url", index);
      this.imgId = pathIndex[0];
      let resetqueryData = {
        pageNo: 1,
        keyword: null,
        firmId: null,
        deptId: null,
        employeeId: null,
        employeeTypeId: null,
        calculationState: null,
        approvalByMeState: null,
        markUpdate: null,
        orderState: null,
        productId: null
      };
      let listArr = this.listArr;
      listArr.find(item => {
        if (item.url === index) {
          this.printlabel = item;
        }
      });
      this.valueQuery(resetqueryData);
      let itemEle = JSON.parse(JSON.stringify(this.printlabel));
      let arrList = JSON.parse(JSON.stringify(this.printList));
      if (JSON.stringify(arrList).indexOf(JSON.stringify(itemEle)) == -1) {
        this.printList.push(itemEle);
      }
      this.$nextTick(() => {
        let index = this.printList.findIndex(
          i => i.url === pathIndex[pathIndex.length - 1]
        );
        $(".scrollMenu ")
          .eq(index)
          .addClass("active")
          .siblings()
          .removeClass("active");
        let left = $(".active").position().left;
        let objWidth = $(".active").width();
        let width = $(".tag-group").width();
        let objLeft = objWidth + width;
        if (left > width) {
          $(".tag-group").animate({ scrollLeft: objLeft + "px" }, 500);
        } else if (left < 0) {
          $(".tag-group").animate({ scrollLeft: left + 20 + "px" }, 500);
        }
      });
      this.$store.commit("printData", {
        //print 表示vuex的文件名
        printData: this.printList
      });
      //获取的产品ID
      // if (pathIndex[0] == 6) {
      let data = listArr.find(item => {
        return item.url == index;
      });
      if (data.otherId != null && data.otherId != undefined) {
        sessionStorage.setItem("productId", data.otherId);
      }
      // }
    },
    print(data) {
      this.printList = data;
    },
    handleOpen(key) {
      if (key != "null") {
        this.imgId = key;
      }
    },
    handleClose(key) {
      if (key != "null") {
        this.imgId = key;
      }
    },
    //  获取菜单
    menuList() {
      menuList().then(res => {
        this.list = res.data;
        let listArr = [];
        this.getList(this.list, listArr);
        this.listArr = listArr;
        let productId = res.data[0].children[0].otherId;
        let sessionProdutId = sessionStorage.getItem("productId");
        if (!sessionProdutId) {
          sessionStorage.setItem("productId", productId);
        }
        this.indexUrl = res.data[0].children[0].url;
        this.routerLink();
        this.imgShow(this.$route.path);
      });
    },
    menuShow(data) {
      this.imgShow(data.url);
    },
    // 图标高亮
    imgShow(path) {
      let listArr = this.listArr;
      for (let item = 0; item < listArr.length; item++) {
        if (path == listArr[item].url) {
          if (listArr[item].pid) {
            this.imgId = listArr[item].pid;
          }
        }
      }
    },
    routerLink() {
      let URL = this.$route.name;
      if (URL == "Index") {
        this.$router.push(this.indexUrl);
        sessionStorage.setItem("url", this.indexUrl);
      }
    }
  }
};
</script>

<style scoped lang="less">
::v-deep .el-submenu__title {
  border-bottom: none;
  color: #ffffff;
  text-align: left;
}
::v-deep .el-aside {
  overflow-y: scroll;
  z-index: 20;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 2px;
  background-color: #ccc;
}
::-webkit-scrollbar-thumb {
  background-color: #888;
}
::v-deep .el-menu-item {
  border-left: transparent solid 6px;
}
::v-deep .el-menu-item.is-active {
  border-left: #3b9df8 solid 6px;
}
.el-main {
  background: #f1f4f6;
  padding: unset;
}
.tit {
  width: 210px;
  height: 112px;
  background: #1d2029;
}
img.log {
  width: 50px;
  margin: 32px 10px 30px 19px;
  float: left;
}
.tit p {
  float: left;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  width: 113px;
}
.first {
  margin-top: 37px;
}
.el-menu {
  background: #282a36;
  color: #ffffff;
  border: none;
}
.el-menu-item {
  background: #282a36;
  color: #ffffff;
  text-align: left;
}
::v-deep .el-submenu__title {
  background: #282a36;
}
::v-deep .el-submenu__title:hover {
  background-color: #1d2029;
}
::v-deep .el-submenu.is-active .el-submenu__title {
  border: none;
  text-align: left;
}
.el-menu-item.is-active {
  background: #1d2029 !important;
  text-align: left;
}
.el-submenu__title.is-active {
  background: #1d2029 !important;
}
.menu_left {
  width: 100%;
  height: 100%;
}
.menu_left ::v-deep .el-scrollbar__wrap {
  height: 100%;
  margin-bottom: unset !important;
  margin-right: -18px !important;
  overflow-x: hidden;
}
.menu_lef ::v-deep .el-scrollbar__bar.is-horizontal {
  display: none !important;
}
::v-deep.el-submenu.is-active > .el-submenu__title {
  background: #1d2029 !important;
  text-align: left;
}
</style>
